<%--
  Created by IntelliJ IDEA.
  User: Sophie
  Date: 2024/9/10
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>发布页</title>
    <link rel="shortcut icon" href="<%=basePath%>/img/男女混合.png" type="image/x-icon">
    <link rel="stylesheet" href="<%=basePath%>/css/publish.css">
    <link rel="stylesheet" href="<%=basePath%>/css/iconfont/iconfont.css">
    <script src="<%=basePath%>/js/jquery-3.6.3.min.js"></script>
    <script src="<%=basePath%>/js/jquery.validate.min.js"></script>
    <style>

        .footer {
            box-sizing: border-box;
            position: absolute;
            bottom: 40px;
            width: 100%;
            height: 45px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: #666;
            line-height: 37px
        }

        @font-face {
            font-family: "Soph";
            src: url("LucySaidOkPersonalUseItalic-OV9ee.ttf");
        }

        .footer span {
            font-family: "Soph";
            color: #d34e6d;
            font-size: 45px;
        }

        .footer a {
            text-decoration: none;
            color: #d34e6d;
        }
    </style>
</head>
<body>
<%@include file="top.jsp" %>
<div class="content">
    <div class="comment-item">
        <div class="comment-item-top">
            <div class="item-top-left">
                <a href="javascript:;">
                    <c:choose>
                        <c:when test="${not empty user.avatar}">
                            <img src="${user.avatar}" alt="" class="user-avatar">
                        </c:when>
                        <c:otherwise>
                            <img src="<%=basePath%>/img/水豚.webp" alt="" class="user-avatar">
                        </c:otherwise>
                    </c:choose>
                </a>
                <div class="item-info">
                    <span class="username">${user.name}</span>
                    <span class="pulish-time">正在编辑动态中<span
                            class="signature">${user.motto}</span></span>
                </div>
            </div>
            <div class="item-top-right">
            </div>
        </div>
        <div class="comment-body">
            <div id="contenttext" contenteditable="true"></div>
            <div>
                <a href="javascript:;" class="file">选择图片
                    <input type="file" name="clientInfoFile" id="filesInput" multiple
                           accept="image/jpeg, image/jpg, image/png, application/pdf">
                </a>
                <a onclick="save()" class="file">发布
                </a>
                <div>
                    <span id="totalFileSpan" class="hidden"></span>
                    <div id="selectedFiles"></div>
                </div>
            </div>

        </div>
    </div>
    <div class="tip" style="margin-left: 150px">

    </div>
</div>
<div class="footer">
    <span>Love Sophie</span>
    <p>Copyright © 2016-2018 <a href="https://user.qzone.qq.com/2274790237/">Power by Rowena</a></p>
</div>

<script>
    $(function (){
        var str=`本输入框支持html标签，换行请入<br>
        想增加样式可以加入标签<span style="font-size: 20px;color:red">动态内容<span>`;
        $(".tip").text(str);
    })
    //全局已选择文件列表
    var fileList = new Map();
    // 获取input框的dom元素
    var filesInput = document.getElementById('filesInput');
    //获取展示文件的input框元素
    var selectedFilesDiv = document.getElementById('selectedFiles');
    //给input框添加监听时间
    filesInput.addEventListener('change', updateSelectedFilesList);
    // 当选择文件时的监听时间
    function updateSelectedFilesList(event) {
        Array.from(event.target.files).forEach((file) => {
            //判断是否有重名文件，有的话直接返回并弹出提示
            for (var key of fileList.keys()) {
                if (key.firstElementChild.title == file.name) {
                    // $.modal.alertWarning('禁止重复上传文件');
                    return;
                }
            }
            //创建显示文件信息的组件div
            var fileItem = document.createElement('div');
            //设置名称长度，过长给省略掉
            var fileName = file.name.length > 50 ? file.name.substring(0, 50) + '...' : file.name;
            //设置样式
            fileItem.className = 'file-item';
            //名称
            fileItem.innerHTML = '<span title="' + file.name + '">' + fileName + '</span>'
            //创建删除按钮及样式
            var deleteBtn = document.createElement('a');
            deleteBtn.style = "margin-left : 20px";
            deleteBtn.innerHTML = '删除';
            //不加href没有下划线，这个可以自定义加不加
            deleteBtn.href = "#"
            //给删除按钮添加click事件
            deleteBtn.addEventListener('click', function () {
                fileList.delete(fileItem)
                fileItem.remove();
                updateTotalFileSpan();
            });
            //把按钮添加到文件名称后面
            fileItem.appendChild(deleteBtn);
            //再把所有组件添加到展示文件的组件下
            selectedFilesDiv.appendChild(fileItem);
            //给fileList赋值，保存文件信息
            fileList.set(fileItem, file)
        });
        updateTotalFileSpan();
    }

    //更改文件数量
    function updateTotalFileSpan() {
        //获取显示文件数量的标签组件
        let totalFileSpan = document.getElementById("totalFileSpan")
        if (fileList.size > 0) {
            let fileSizeValue = "已选择" + fileList.size + "个文件";
            totalFileSpan.classList.remove("hidden")
            totalFileSpan.textContent = fileSizeValue
        } else {
            totalFileSpan.classList.add("hidden");
            totalFileSpan.textContent = ""
        }
        console.log(fileList)
    }
    function save() {
        let contenttext = $("#contenttext").text();
        console.log(contenttext);
        if (contenttext.trim()== null) {
            alert("你发布的动态不能为空!");
        } else {
            //创建ajax传输参数所需的FormData
            //其他参数也可以在这里添加，直接使用formData.append("参数名","参数值")就行
            let formData = new FormData();
            console.log("contenttext=" + contenttext);

            formData.append('contenttext', contenttext);
            console.log("formData=", formData);
            //获取文件列表
            let files = [];
            for (let value of fileList.values()) {
                files.push(value);
            }
            for (var i = 0; i < files.length; i++) {
                //有需求可以在这里对每个文件做处理，没需求可以直接添加
                formData.append('files', files[i]); // 将每个文件添加到数组参数中
            }
            console.log("formData=", formData);
            //这里我用的是Jquery.js 中的 $.ajax请求，也可以更改为原生的new XMLHttpRequest()请求方式
            $.ajax({
                cache: true,
                type: "POST",
                url: "ZoneServlet?method=publish", //prefix是前缀地址，这里可以换成自己的地址
                contentType: false, //必须要加， 不设置 contentType 属性，让浏览器自动识别
                processData: false, //必须要加， 不处理发送的数据，让浏览器自动处理
                data: formData,//上面定义的数据
                async: true,
                beforeSend: function () {
                    // 提交之前方法，一般加遮盖层
                    // $.modal.loading("正在处理中，请稍后...");
                },
                error: function (request) {
                    // 提交返回失败方法
                    // $.modal.closeLoading();
                    // $.modal.alertError("系统错误");
                },
                success: function (data) {
                    if (data.code == 0) {
                        window.location.href = "UserServlet?method=toUpdatePage";
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }
    }
</script>
</body>
</html>
